<template>
  <el-row class="board-page-wrapper">
    <el-row :gutter="10" class="query-container">
      <el-col :span="6" class="flex-wrapper">
        <span class="query-label">学年*</span>
        <el-select v-model="query.yearChoose" size="small" style="width: calc(100% - 70px);">
          <el-option label="202011" value="1"></el-option>
          <el-option label="202012" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" class="flex-wrapper">
        <span class="query-label">学期*</span>
        <el-select v-model="query.semesterChoose" size="small" style="width: calc(100% - 70px);">
          <el-option label="202011" value="1"></el-option>
          <el-option label="202012" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button size="small">搜索</el-button>
      </el-col>
      <el-col :span="6" class="text-right">
        <el-button size="small" @click="exportExcel('#orderTableWrapper')">导出EXCEL</el-button>
        <el-button size="small" @click="exportPDF('#orderTableWrapper')">导出PDF</el-button>
      </el-col>
    </el-row>
    <section class="board-table-wrapper" id="orderTableWrapper">
      <el-table
        class="orderTable"
        id="orderTable"
        :data="tableData"
        border
        style="width: 100%"
        :span-method="spanMethod"
      >
        <el-table-column prop="timeSlot" label="时间段" width="85" align="center"> </el-table-column>
        <el-table-column prop="times" label="节次" width="85" align="center"> </el-table-column>
        <el-table-column prop="monday" label="星期一" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.monday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.monday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.monday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.monday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.monday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="tuesday" label="星期二" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.tuesday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.tuesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.tuesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.tuesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.tuesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="wednesday" label="星期三" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.wednesday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.wednesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.wednesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.wednesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.wednesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="thursday" label="星期四" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.thursday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.thursday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.thursday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.thursday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.thursday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="friday" label="星期五" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.friday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.friday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.friday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.friday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.friday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="saturday" label="星期六" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.saturday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.saturday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.saturday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.saturday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.saturday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="sunday" label="星期日" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.sunday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.sunday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.sunday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.sunday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.sunday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import download from '@/utils/htmlToPdf.js'

  export default {
    data() {
      return {
        query: {
          semesterChoose: '1',
          yearChoose: ''
        },
        tableData: [],
        rowList: [],
        spanArr: [
          [4, 1, 2, 1, 1, 1, 1, 1, 1],
          [0, 1, 0, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 2, 1, 1, 1, 1, 1],
          [0, 1, 1, 0, 1, 1, 1, 1, 1],
          [4, 1, 1, 1, 2, 1, 1, 1, 1],
          [0, 1, 1, 1, 0, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 2, 1, 1, 1],
          [0, 1, 1, 1, 1, 0, 1, 1, 1]
        ],
        position: 0
      }
    },
    mounted() {
      this.queryData()
    },
    components: {},
    methods: {
      queryData() {
        //查询操作
        this.tableData = [
          {
            timeSlot: '上午',
            times: '1',
            monday: '第一节，第一节第一节第一节第一节第一节第一节第一节第一节',
            tuesday: '',
            wednesdy: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '1',
            type: 0
          },
          {
            timeSlot: '上午',
            times: '2',
            monday: '第一节',
            tuesday: '',
            wednesdy: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '1',
            type: 0
          },
          {
            timeSlot: '上午',
            times: '3',
            monday: '',
            tuesday: '第三节',
            wednesdy: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 2
          },
          {
            timeSlot: '上午',
            times: '4',
            monday: '',
            tuesday: '第三节',
            wednesdy: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 2
          },
          {
            timeSlot: '下午',
            times: '5',
            monday: '',
            tuesday: '',
            wednesdy: '第四节',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 4
          },
          {
            timeSlot: '下午',
            times: '6',
            monday: '',
            tuesday: '',
            wednesdy: '第四节',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 4
          },
          {
            timeSlot: '下午',
            times: '7',
            monday: '',
            tuesday: '',
            wednesdy: '',
            thursday: '第七节',
            friday: '',
            saturday: '',
            sunday: '',
            type: 6
          },
          {
            timeSlot: '下午',
            times: '8',
            monday: '',
            tuesday: '',
            wednesdy: '',
            thursday: '第七节',
            friday: '',
            saturday: '',
            sunday: '',
            type: 6
          }
        ]
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        return {
          rowspan: this.spanArr[rowIndex][columnIndex],
          colspan: this.spanArr[rowIndex][columnIndex] ? 1 : 0
        }
      },
      // 导出EXCEL
      exportExcel(id) {
        var reportTitle = '教师课表.xlsx'
        /* generate workbook object from table */
        // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
        var fix = document.querySelector('.orderTable')
        var wb
        var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
        if (fix) {
          wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix), xlsxParam)
          document.querySelector(id).appendChild(fix)
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
        }
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: 'application/octet-stream'
            }),
            reportTitle
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },

      exportPDF() {
        let dom = document.getElementById('orderTableWrapper')
        download.downloadPDF(dom, '教师课表')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      line-height: 32px;
      padding: 10px 30px;
      .flex-wrapper {
        display: flex;
        flex-wrap: nowrap;
      }
      .query-label {
        display: inline-block;
        width: 70px;
        text-align: right;
        margin-right: 5px;
      }
    }
  }

  .text-right {
    text-align: right;
  }
</style>
